<template>
  <div class="main">
    <Nav />
    <div class="right_route">
      <div class="top_content">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="item">
              <span>员工编号：</span>
              <div>
                <el-input v-model="infor.employee_number" placeholder="请输入员工编号" size="large" />
              </div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="item">
              <span>员工名称：</span>
              <div>
                <el-input v-model="infor.employee_namer" placeholder="请输入员工名称" size="large" />
              </div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="item">
              <span>员工状态：</span>
              <div>
                <el-select v-model="infor.state" placeholder="请选择" size="large">
                  <el-option label="Restaurant" value="1" />
                  <el-option label="Order No." value="2" />
                </el-select>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="add_data">
        <el-button type="primary" size="large" @click="add_data">+ 新建</el-button>
      </div>
      <div class="table">
        <Table :list="table_list" @change="change_data"/>
      </div>
      <div class="pagination">
        <Pagination :list="page_list" :limit="limit" @change="page_change" />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="ruleForm.id?'修改员工':'创建员工'" width="30%" destroy-on-close @close="close_data">
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm"
          size="large">
          <el-form-item label="员工工号" prop="job_num">
            <el-input v-model="ruleForm.job_num" autocomplete="off" placeholder="请输入员工工号"/>
          </el-form-item>
          <el-form-item label="员工名称" prop="nickname">
            <el-input v-model="ruleForm.nickname" autocomplete="off" placeholder="请输入员工名称"/>
          </el-form-item>
          <el-form-item label="所属部门" prop="role_id">
            <el-select v-model="ruleForm.role_id" placeholder="请选择部门">
              <el-option v-for="(item, index) in dept_list" :key="index" :label="item.role_name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="地区" prop="area">
            <el-cascader v-model="ruleForm.area" :options="region_data" @change="handleChange"
              :props="{ value: 'code', label: 'name', children: '_child' }" placeholder="请选择地区"/>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone_num">
            <el-input v-model="ruleForm.phone_num" autocomplete="off" placeholder="请输入手机号码"/>
          </el-form-item>
          <el-form-item label="微信号" prop="wx_num">
            <el-input v-model="ruleForm.wx_num" autocomplete="off" placeholder="请输入微信号码"/>
          </el-form-item>
          <el-form-item label="二维码" prop="wx_qcode">
            <el-upload ref="uploadRef" class="upload-demo"
                            action="https://www.itvalue.com.cn/event/api_register/13" :auto-upload="false"
                            list-type="picture-card" :on-change="change_img" :on-remove="remove" >

                            <div class="uploadImg" v-if="!ruleForm.wx_qcode">
                                <div class="img">
                                    <img src="@/assets/img/system/upload.png" alt="">
                                </div>
                                <div class="text">添加二维码</div>
                            </div>
                            <div v-if="ruleForm.wx_qcode">
                              <img :src="ruleForm.wx_qcode" alt="" class="wx_qcode_img">
                            </div>
                        </el-upload>
                        <!-- v-if="!ruleForm.wx_qcode" -->
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" type="textarea" resize="none" maxlength="100" placeholder="请输入备注"
              show-word-limit />
          </el-form-item>
        </el-form>
        <div class="submit_button">
          <el-button type="info" @click="close">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)" class="button">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reload } from "@/utils/flushed"
import { onMounted, ref, reactive } from 'vue'
import type {
  FormInstance
} from "element-plus";
import Nav from "@/components/public/nav.vue"
import Table from "@/components/permissions/table.vue"
import { get_user_data, get_region_data, add_user } from "@/request/api/user.ts"
import { get_dept_list } from "@/request/api/dept.ts"
import { update_img } from "@/request/api/system.ts"
const ruleFormRef = ref<FormInstance>();
const infor = reactive({
  employee_number: '',
  employee_namer: '',
  state: '',
})
const limit = ref(10)
let params_init = {
  limit: limit.value,
  page: 1
}
const ruleForm:any = reactive({
  id: undefined,
  job_num: "",
  nickname: "",
  role_id: "",
  area: "",
  status: "",
  updated_operator_name: "",
  phone_num: "",
  remark: "",
  wx_num:"",
  password:"",
  wx_qcode : ""
});
let region_data: any = ref([])
let table_list = ref("")
let page_list = ref("")
let dialogVisible = ref(false)
let dept_list: any = ref([])
let add_data = () => {
  dialogVisible.value = true
}
const submitForm = async (ruleFormRef: any) => {
  console.log(typeof(ruleForm.wx_qcode) == "string","wx_qcodewx_qcode");
  
  if (!ruleFormRef) return
  await ruleFormRef.validate(async (valid: any) => {
    if (valid) {
      let data1:any
      if(typeof(ruleForm.wx_qcode) != "string"){
        let fd = new FormData()
        fd.append("file", ruleForm.wx_qcode)
        data1 = await update_img(fd)
      }
      let data: any = await add_user({id:ruleForm.id, mobile: ruleForm.phone_num, nickname: ruleForm.nickname, role_id: ruleForm.role_id, job_num: ruleForm.job_num, area_province_id: ruleForm.area[0], area_city_id: ruleForm.area[1], area_district_id: ruleForm.area[2] ,wx_num:ruleForm.wx_num,password:ruleForm.password,wx_qcode:typeof(ruleForm.wx_qcode) == "string"?ruleForm.wx_qcode: import.meta.env.VITE_BASE_URL + "/" + data1.data.file})
      console.log(data, "添加");
      if (data.code == "200") {
        if (ruleForm.id) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
        }
        reload()
      } else {
        ElMessage.error(data.message)
      }
    } else {
      // console.log('error submit!', fields)
    }
  })
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入"));
  }
  callback();

};
const rules = reactive({
  job_num: [{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
  nickname: [{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
  role_id: [{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
  area: [{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
  updated_operator_name: [{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
  phone_num: [{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
  wx_num:[{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
  wx_qcode :[{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
});
// 获取列表数据
const get_user_data_list = async () => {
  let { data } = await get_user_data(params_init)
  table_list.value = data.list
  page_list.value = data.pageData
  console.log(data, "data");
}
// 页数发生改变
const page_change = (val: any) => {
  params_init.page = val
  get_user_data_list()
}
// 获取地区数据
const get_region_data_list = async () => {
  let { data } = await get_region_data({ is_tree: 1 })
  console.log(data, "地区数据");
  region_data.value = data
}
// 获取部门列表数据
const get_dept_data_list = async () => {
  let { data } = await get_dept_list()
  dept_list.value = data.list
  console.log(data, "data部门");
}
const handleChange = (value: any) => {
  console.log(value)
}
const close = () => {
  dialogVisible.value = false
}
onMounted(() => {
  get_user_data_list()
  get_region_data_list()
  get_dept_data_list()
})
// 修改
const change_data = (row: any) => {
  ruleForm.id = row.id
  ruleForm.phone_num = row.mobile
  ruleForm.nickname = row.nickname
  ruleForm.role_id = row.role_id
  ruleForm.job_num = row.job_num
  ruleForm.area = [row.area_province_id,row.area_city_id,row.area_district_id]
  ruleForm.account = row.account
  ruleForm.password = row.password
  ruleForm.wx_num = row.wx_num
  ruleForm.wx_qcode = row.wx_qcode
  dialogVisible.value = true
  console.log(row,"row",document.querySelector(".el-upload-list__item-thumbnail"));
}
const close_data = ()=>{
  ruleForm.id = undefined
  ruleForm.phone_num = ""
  ruleForm.nickname = ""
  ruleForm.role_id = ""
  ruleForm.job_num = ""
  ruleForm.area = ""
  ruleForm.account = ""
  ruleForm.password = ""
  ruleForm.wx_num = ""
  ruleForm.wx_qcode = ""
}
const change_img = (uploadFile: any) => {
    console.log(uploadFile)
    ruleForm.wx_qcode = uploadFile.raw
}
const remove = () => {
    console.log("离开了");
    ruleForm.wx_qcode = ''
    
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;

  .right_route {
    padding: 10px 20px 0 20px;
    flex: 1;
    box-sizing: border-box;

    .top_content {
      border: 1px solid rgba(242, 242, 242, 1);
      padding: 20px 10px;
      width: 100%;
      box-sizing: border-box;

      .item {
        align-items: center;
        display: flex;

        span {
          display: inline-block;
          width: 70px;
          @include font(rgba(0, 0, 0, 0.8470588235294118), 14, 22);
        }

        >div {
          flex: 1;
        }
      }
    }

    .add_data {
      margin: 20px 0;
      text-align: right;
    }

    .pagination {
      margin: 20px 0;
      display: flex;
      justify-content: right;
    }
  }
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-textarea__inner) {
  height: 100px;
}

:deep(.el-dialog__body) {
  padding-left: 50px;
  padding-right: 50px;
}
:deep(.el-dialog__header) {
  background: rgba(245, 245, 245, 1);
  margin-right: 0;
  padding: 10px 20px;
}

:deep(.el-dialog__headerbtn) {
  display: none;
}

.submit_button {
  padding-top: 20px;
  border-top: 1px solid rgb(242, 242, 242);
  text-align: right;
}
:deep(.el-input){
  height: 32px;
}
:deep(.el-button){
  height: 32px;
}
:deep(.upload-demo) {
    width: 148px;
    ;
    height: 148px;
    ;
    overflow: hidden;

}

:deep(.el-upload) {
    height: 148px;
    ;
}

:deep(.el-upload--picture-card) {
    background-color: #F8F8F8;
    border: none;
}

.uploadImg {
    height: 148px;

    .img {
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    img {
        width: 20px;
        // height: 39px;
    }

    .text {
        @include font(#333333, 12, 20);
        margin-top: 20px;
    }
}
:deep(.el-upload-list__item-preview) {
    display: none !important;
}

:deep(.el-upload-list__item-delete) {
    margin-left: 0 !important;
}
.wx_qcode_img{
  width: 148px;
  height: 148px;
  object-fit: cover;
}
</style>